<template>
    <!-- 底部菜单 -->
    <ul class="footer">
        <li @click="toHome()">
            <i class="fa fa-home"></i>
            <p>首页</p>
        </li>
        <!-- <li>
            <i class="fa fa-compass"></i>
            <p>发现</p>
        </li> -->
        <li @click="tohistoryorders()">
            <i class="fa fa-file-text-o"></i>
            <p>订单</p>
        </li>
        <li @click="toMine()">
            <i class="fa fa-user-o"></i>
            <p>我的</p>
        </li>
    </ul>
</template>


<script>
export default {
    name:'Footer',
    methods:{
        toHome(){
            this.$router.push('/home');
        },
        tohistoryorders(){
            this.$router.push('/historyorders');
        },
        toMine(){
            this.$router.push('/mine');
        }
        
    }
}
</script>


<style scoped>
/* 底部菜单 */
.content .footer{
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 14vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #DDD;
    background-color: #fff;
    color: #999;
}
.content .footer li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content .footer li i{
    font-size: 5vw;
}
.content .footer li p{
    font-size: 2.8vw;
}
</style>